<template>
  <div class="position">
    <!-- 引入公用的头部组件 -->
    <my-header></my-header>
    <!-- 引入的组件布局模式 -->
    <el-container>
      <!-- 整个内容区域都上半个区域 -->
      <el-header class="top">
        <div class="bx">
          <!-- 整个输入框 -->
          <div class="drbox">
            <div class="drCenter">
              <!-- 下拉菜单 -->
              <el-dropdown class="down">
                <el-button type="primary" class="downButton">
                  <!-- {{this.citysh}} -->
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item, idx) in doWn" :key="idx">
                    {{ item.citysh }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- 输入框 -->
              <input type="text" placeholder="搜索职位、公司" />
              <!-- 搜索按钮 -->
              <el-button class="bButton">搜索</el-button>
            </div>
            <el-button class="bButton2" icon="el-icon-right"
               @click="goLogin">登陆，查看更多</el-button
            >
          </div>
          <!-- 一级导航城市 -->
          <div class="oneNav">
            <h3>城市</h3>
            <ul>
              <li
                v-for="(item, idx) in oneData"
                :key="idx"
                @click="twoDatas(idx)"
              >
                {{ item.citysh }}
              </li>
            </ul>
          </div>
          <!-- 二级导航区域 -->
          <div class="twoNav">
            <h3>区域</h3>
            <ul class="ul">
              <li
                v-for="(item, idx) in twoData"
                :key="idx"
                :id="item.id"
                :title="item.districtName"
                @click="toDeatil(idx)"
              >
                {{ item.districtName }}
              </li>
            </ul>
          </div>
        </div>
      </el-header>
      <!-- 中间主体部分 -->
      <el-container>
        <el-container class="conbox">
          <div class="bx1">
            <el-main class="centers">
              <div class="footer">
                <div class="articleList">
                  <div
                    class="articleListItem"
                    v-for="item in articleList"
                    :key="item.id"
                  >
                    <!-- 信息循环列表 -->
                    <div class="Center">
                      <div class="Button"></div>
                      <!-- 左边职位介绍 -->
                      <div class="minleft">
                        <h2>
                          <span>{{ item.jobDemands }}</span
                          >{{ item.companyDddress }}
                        </h2>
                        <p>
                          <b>{{ item.compensation }}</b
                          ><span>{{ item.education }}</span
                          ><span>{{ item.experience }}</span
                          ><span></span>
                        </p>
                        <div class="p1">
                          <p v-for="(msg, idx) in item.JobSkills" :key="idx">
                            {{ msg }}
                          </p>
                        </div>
                      </div>
                      <!-- 右边公司介绍 -->
                      <div class="minright">
                        <!-- 公司介绍图片 -->
                        <div class="nav">
                          <img :src="item.Aimg" alt="" />
                          <div>
                            <h2>{{ item.companyName }}</h2>
                            <p>{{ item.enterpriseService }}</p>
                          </div>
                        </div>
                        <div class="p1">
                          <p
                            v-for="(msg, ix) in item.corporateWelfare"
                            :key="ix"
                          >
                            {{ msg }}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <fcy-elect> </fcy-elect>
            </el-main>
            <el-aside width="200px" class="rights">
              <fcy-ce></fcy-ce>
              </el-aside>
          </div>
        </el-container>
      </el-container>
    </el-container>

    <my-footer></my-footer>
  </div>
</template>

<script>
import header from "@/components/header.vue";
import footer from "@/components/footer.vue";
import elect from "@/components/elect.vue";
import ce from "@/components/ce.vue";

import { getInpo } from "@/api";

export default {
  name: "InPo",
  data() {
    return {
      oneData: [],
      twoData: [],
      doWn: [],
      articleList: [],
    };
  },
  components: {
    "my-header": header,
    "my-footer": footer,
    "fcy-elect": elect,
    "fcy-ce": ce,
  },
  created() {
    getInpo().then((res) => {
      this.oneData = res.data.data;
      //  下拉菜单的数据
      this.doWn = res.data.data;
      // 点击一级渲染二级页面
      this.twoData = this.oneData[0].district;
      this.articleList = this.twoData[0].children;
    });
  },
  methods: {
    // 点击一级渲染二级页面
    twoDatas(i) {
      this.twoData = this.oneData[i].district;
      // console.log(this.oneData[0].district);
    },
    toDeatil(i) {
      this.articleList = this.twoData[i].children;
    },goLogin() {
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.rights {
  margin-top: 20px;
  min-height: 800px;
}

.centers {
  min-height: 800px;
  width: 900px;
  margin-right: 20px;
  padding: 0;
  .Center {
    width: 100%;
    height: 150px;
    margin: 20px 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 10px;
    position: relative;
    cursor: pointer;

    &:hover {
      box-shadow: 0px 10px 10px #e1e3e5;
      transition: all 0.4s linear;
    }

    .Button {
      width: 100%;
      height: 30px;
      background-image: linear-gradient(to right, #f7fbfb 50%, #fcfbfa 50%);
      border-radius: 0px 0px 10px 10px;

      position: absolute;
      bottom: 0;
    }

    .minright {
      .nav {
        width: 365px;
        display: flex;
        align-items: center;
        // background: red;
        img {
          width: 100px;
          height: 100px;
        }
        div {
          margin-left: 20px;
          p {
            line-height: 30px;
          }
        }
      }
      .p1 {
        display: flex;
        line-height: 42px;
        position: absolute;
        bottom: 0;
        p {
          text-align: center;
          margin: 0 6px;
          font-size: 13px;
          line-height: 30px;
        }
      }
    }

    .minleft {
      .p1 {
        display: flex;
        position: absolute;
        bottom: 0;

        p {
          text-align: center;
          margin: 0 10px;
          font-size: 13px;
        }
      }
      h2 {
        span {
          margin-right: 10px;
        }
      }
      p {
        line-height: 30px;
        b {
          color: red;
          font-size: 20px;
        }
        span:nth-child(2),
        span:nth-child(3) {
          background: #f1f1f1;
          padding: 2px;
          font-size: 13px;
          margin-left: 10px;
        }
      }
    }
  }
}

.bx1 {
  display: flex;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}
.top {
  position: sticky;
      top: 0;
      z-index: 2;
  background-color: #fff;
  min-height: 200px;
  .bx {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding-top: 30px;
    // background: red;
    .drbox {
      display: flex;
      .drCenter {
        width: 900px;
        height: 50px;
        display: flex;
        border: 2px solid #55bbbc;
        background: #55bbbc;
        border-radius: 10px;
        margin-right: 0;
        input {
          height: 100%;
          flex: 1;
          border: none;
          outline: none;
          border-radius: 0px 10px 10px 0px;
        }
        .down {
          height: 100%;
          border: none;
          .downButton {
            border: none;
            height: 100%;
            border-radius: 10px 0 0 10px;
            background: #fff;
            color: #000;
          }
        }
        .bButton {
          width: 80px;
          border: none;
          background: #55bbbc;
          color: #fff;
          border-radius: 0 10px 10px 0;
        }
      }
      .bButton2 {
        height: 50px;
        width: 270px;
        border: 2px solid #55bbbc;
        color: #55bbbc;
        float: right;
        margin: 2px 0 0 auto;
        border-radius: 10px 10px;
      }
    }
    .oneNav {
      display: flex;
      // background: sandybrown;
      margin-top: 20px;
      height: 40px;
      h3 {
        width: 40px;
        line-height: 40px;
        text-align: center;
        margin: 0px 20px 0 0;
      }
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        li {
          margin: 0 20px;
          padding: 10px;
        }
        li:hover {
          color: aqua;
          // background: yellow;
          cursor: pointer;
        }
      }
    }
    .twoNav {
      display: flex;
      height: 40px;

      h3 {
        width: 40px;
        line-height: 40px;
        text-align: center;
        margin: 0px 20px 0 0;
      }
      .ul {
        width: 100%;
        height: 100%;
        display: flex;
        background: #f1f1f1;
        border-radius: 8px;
        align-items: center;
        li {
          margin: 0 20px;
          padding: 10px;
        }
        li:hover {
          color: aqua;
          cursor: pointer;
          // background: yellow;
        }
      }
    }
  }
}
.conbox {
  background: #f1f1f1;
}
</style>
